<template>
	<view>
		<!--标题栏-->
		<bar-title bgColor='bg-white'>
			<block slot="content" v-if="barShow">商品详情</block>
			<block slot="content" v-else>
				<text class="text-price text-red text-xxl">{{ goodsDetail && goodsDetail.price.current }}</text>
			</block>
			<block slot="right">
				<text class="cuIcon-forward" />
				<text class="cuIcon-more" />
			</block>
		</bar-title>

		<!--加载状态-->
		<view v-if="loading" class="loading-container">
			<view class="cu-load loading"></view>
			<view class="text-gray">正在加载商品详情...</view>
		</view>

		<!--错误状态-->
		<view v-else-if="error" class="error-container">
			<view class="cuIcon-warnfill text-red" style="font-size: 60rpx;"></view>
			<view class="text-gray margin-top">{{ errorMessage }}</view>
			<button class="cu-btn bg-blue margin-top" @tap="reloadPage">重新加载</button>
		</view>

		<!--正常内容-->
		<view v-else>
			<view class="bg-white zaiui-scroll-tab-view" v-if="!barShow">
				<scroll-view scroll-x class="nav z text-center">
					<block v-for="(item, index) in tabListData" :key="index">
						<view class="cu-item" :class="index == TabCur ? 'text-black select' : ''" @tap="tabSelect"
							:data-id="index">
							<view>{{ item }}</view>
							<view class="tab-dot bg-red" />
						</view>
					</block>
				</scroll-view>
			</view>

			<!--Tab栏占位-->
			<view class="zaiui-scroll-height-view" v-if="!barShow" />

			<!--商品简介-->
			<view class="bg-white padding zaiui-goods-synopsis-view" v-if="goodsDetail">
				<!--商品描述（移至价格上方）-->
				<view class="description-highlight margin-bottom-lg">
					<text class="text-xl font-bold text-black">{{ goodsDetail.tradeType }}{{ goodsDetail.tradeDetails
						}}{{
							goodsDetail && goodsDetail.description }}</text>
				</view>
				
				<!--商品互动统计-->
				
				<view class="stats-row flex items-center text-gray margin-bottom-sm">
					<view class="stat-item" @tap="handleWant">
						<text class="cuIcon-hot text-orange"/> 
						<text>{{ goodsDetail.popularity.views || 0 }}人浏览</text>
					</view>
					<view class="stat-item margin-left-md" @tap="toggleFavorite">
						<text class="cuIcon-goods text-yellow" :class="{ 'text-yellow': isFavorited }" /> 
						<text>{{ goodsDetail.popularity.favorites || 0 }}人想要</text>
					</view>
					<view class="stat-item margin-left-md" @tap="toggleLike">
						<text class="cuIcon-like text-red" :class="{ 'text-red': isLiked }" /> 
						<text>{{ goodsDetail.popularity.likes || 0 }}人点赞</text>
					</view>
				</view>

				<view class="margin-tb-lg price-view">
					<view class="price-highlight">
						<text class="text-4xl text-red font-bold">{{ goodsDetail && goodsDetail.price.current }}</text>
					</view>
					<text class="text-through text-gray text-sm margin-left-sm">原价￥{{ goodsDetail &&
						goodsDetail.price.original }}</text>
					<view class="margin-top-sm">
						<text class="cu-tag line-orange sm radius" v-if="goodsDetail && goodsDetail.price.drop > 0">
							<text class="cuIcon-refresharrow" />
							<text class="margin-left-xs">已降{{ goodsDetail.price.drop }}元</text>
						</text>
						<text class="cu-tag line-blue sm radius margin-left-sm"
							v-if="goodsDetail && goodsDetail.price.cheaperThanSimilar > 0">
							<text class="cuIcon-likefill" />
							<text class="margin-left-xs">比同型号便宜{{ goodsDetail.price.cheaperThanSimilar }}元</text>
						</text>
					</view>
				</view>
				<view class="text-sm margin-top-sm zaiui-map-view" v-if="goodsDetail && goodsDetail.location">
					<view class="text-cut cut-view">
						<text class="cuIcon-locationfill text-red" />
						<text class="margin-left-xs">{{ goodsDetail.location.address }}</text>
						<text class="text-gray margin-left-sm">距离{{ goodsDetail.location.distance }}</text>
					</view>
					<view class="text-right-view">
						<text class="text-view">查看宝贝位置</text>
						<text class="cuIcon-right" />
					</view>
				</view>
			</view>

			<!--服务-->
			<view class="margin-top padding bg-white zaiui-service-view-box"
				v-if="goodsDetail && goodsDetail.services && goodsDetail.services.length > 0">
				<view class="flex flex-wrap">
					<view class="basis-1">
						<text class="text-gray">服务</text>
					</view>
					<view class="basis-9">
						<view class="tag-view-box">
							<text class="tag-view" v-for="(service, index) in goodsDetail.services" :key="index">
								<text class="cuIcon-title text-red" />
								<text>{{ service }}</text>
							</text>
						</view>
					</view>
				</view>
			</view>

			<!--商品属性-->
			<view class="margin-top padding bg-white zaiui-details-view-box" v-if="goodsDetail">
				<view class="text-black text-xl title-view">商品属性</view>
				<view v-if="goodsDetail && goodsDetail.attributes" class="grid col-2 margin-bottom">
					<view v-for="(attr, index) in goodsDetail.attributes" :key="index" class="col-item">
						<text class="text-gray">{{ attr.key }}：</text>
						<text class="text-black">{{ attr.value }}</text>
					</view>
				</view>

				<view class="zaiui-img-box" v-if="goodsDetail && goodsDetail.images && goodsDetail.images.length > 0">
					<image v-for="(banner, index) in goodsDetail.images" :key="index" :src="banner.url"
						mode="widthFix" />
				</view>
				<view class="process_content_view" v-if="goodsDetail && goodsDetail.process">
					<view class="zaiui-border-view" />

					<!--平台验机流程-->
					<view class="title-view margin-bottom">
						<text class="text-black text-xl">平台验机保障</text>
						<text class="text-gray text-sm margin-left">专业质检，放心交易</text>
					</view>

					<view class="bg-white zaiui-steps-view">
						<view class="cu-steps steps-arrow">
							<view class="cu-item" v-for="(process, index) in goodsDetail.process" :key="index">
								<text :class="process.icon + 'text-blue'" />
								<text class="text-black">{{ process.name }}</text>
								<view class="text-gray text-sm">{{ process.desc }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!--关于卖家-->
			<view class="margin-top bg-white zaiui-selll-user-view-box" v-if="goodsDetail && goodsDetail.seller">
				<view class="padding text-black text-lg">关于卖家</view>
				<view class="cu-list menu-avatar ">
					<view class="cu-item">
						<view class="cu-avatar round"
							:style="{ backgroundImage: 'url(' + (goodsDetail.seller.avatar || '/static/images/avatar/default.png') + ')' }" />
						<view class="content">
							<view class="text-black">
								<view class="text-cut">{{ goodsDetail.seller.name || '未知卖家' }}</view>
								<view class="seller-verification">
									<view class="text-right-view">
										<view class="authentication-badge">
											<view class="auth-item real-name-auth"
												v-if="goodsDetail && goodsDetail.seller.realNameAuth">
												<text class="cuIcon-roundcheckfill text-green" />
												<text class="auth-text">已实名</text>
											</view>
											<view class="auth-item phone-auth"
												v-if="goodsDetail && goodsDetail.seller.phoneAuth">
												<text class="cuIcon-safe text-blue" />
												<text class="auth-text">手机认证</text>
											</view>
										</view>
										<text class="text-gray text-sm margin-left-xs"
											v-if="goodsDetail && goodsDetail.seller.status === 'online'">当前在线</text>
										<text class="text-gray text-sm margin-left-xs" v-else>离线</text>
									</view>
								</view>
							</view>
							<view class="flex">
								<text class="text-sm text-gray">{{ goodsDetail.seller.description }}</text>
							</view>
						</view>
						<view class="action">
							<view class="cuIcon-right text-gray" />
						</view>
					</view>
				</view>
				<view class="padding zaiui-grid-tab-view">
					<view class="stats-container">
						<view class="stat-item" v-for="(stat, index) in sellerStats" :key="index">
							<view class="stat-value" :class="stat.highlight ? 'text-red' : 'text-blue'">{{ stat.value }}
							</view>
							<view class="stat-label">{{ stat.label }}</view>
						</view>
					</view>
				</view>
				<!-- #ifndef MP-TOUTIAO -->
				<view class="zaiui-goods-swiper-view">
					<swiper class="screen-swiper square-dot" indicator-dots circular :autoplay="false">
						<swiper-item v-for="pageIndex in Math.ceil(goodsDetail.seller.recommendedGoods.length / 4)"
							:key="pageIndex">
							<view class="grid col-4">
								<view v-for="item in getSwiperPageItems(pageIndex)" :key="item.id" class="goods-item">
									<view class="cu-avatar radius xl"
										:style="[{ backgroundImage: 'url(' + item.image + ')' }]" />
									<text class="text-sm text-price-view">￥{{ item.price }}</text>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<!-- #endif -->
			</view>

			<!--互动-->
			<view class="margin-top padding bg-white zaiui-interaction-view-box" v-if="goodsDetail">
				<view class="padding-bottom text-black text-lg" v-if="interaction">互动</view>
				<view class="padding-bottom text-black text-lg" v-else>互动（ {{ questions ? questions.length : 0 }} ）
				</view>
				<view class="zaiui-null-view" v-if="interaction">
					<view class="text-view-box">「问卖家」想知道更多宝贝细节</view>
					<button class="cu-btn bg-red round" @tap="interaction = false">点击提问</button>
				</view>
				<view class="zaiui-interaction-view" v-else>
					<view class="padding-tb-sm user-input-view">
						<view class="cu-avatar round"
							:style="[{ backgroundImage: 'url(' + (userInfo.avatar || '/static/images/avatar/1.jpg') + ')' }]" />
						<view class="input-view-box">
							<view class="arrow-view" />
							<input class="input-view" v-model="questionInput" placeholder="问问更多细节吧~"
								@confirm="submitQuestion"></input>
							<button class="cu-btn bg-red" @tap="submitQuestion">留言</button>
						</view>
					</view>
					<view class="zaiui-interaction-list-view" v-if="questions && questions.length > 0">
						<view class="list-itme" v-for="(question, index) in questions" :key="index">
							<view class="cu-avatar round"
								:style="[{ backgroundImage: 'url(' + question.avatar + ')' }]" />
							<view class="view-box">
								<view class="title-box">
									<text class="margin-right-xs">{{ question.username ? question.username : '匿名用户'
									}}</text>
									<text class="text-sm">{{ question.time }}</text>
								</view>
								<view class="text-black content-box">
									{{ question.question }}
								</view>
								<view class="padding-sm radius zaiui-comment-view" v-if="question.answer">
									<view class="text-sm user-name-box">
										<text>{{ question.answerUser }}</text>
										<text class="cu-tag light bg-red sm radius">卖家</text>
										<text>{{ question.answerTime }}</text>
									</view>
									<view class="zaiui-reply-view">
										<text class="text-black">回复</text>
										<text class="text-blue">@{{ question.username }}</text>
										<text class="text-black">： {{ question.answer }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="padding-top text-center text-blue">展开更多</view>
					</view>
					<view v-else class="text-center text-gray padding">暂无问答</view>
				</view>
				<view class="zaiui-border-view" />
				<view class="padding-bottom text-black text-lg">大家都想问</view>
				<view class="zaiui-tag-view-box">
					<view class="cu-tag light bg-red round" v-for="(tag, index) in questionsTags" :key="index"
						@tap="quickQuestion(tag)">
						<text class="margin-right-xs">{{ tag }}</text>
						<text class="cuIcon-creativefill" />
					</view>
				</view>
				<view class="zaiui-tag-text-view-box" v-if="commonQuestions.length > 0">
					<view class="text-cut" v-for="(qa, index) in commonQuestions" :key="index">
						<text class="cu-tag line-red radius sm">问</text>
						<text class="text-black margin-lr-xs">{{ qa.question }}</text>
						<text class="text-gray text-sm">答：{{ qa.answer }}</text>
					</view>
				</view>
				<view class="zaiui-border-view" />
				<view class="text-center text-blue">查看更多问答</view>
			</view>

			<!--相似商品-->
			<view class="margin-tb zaiui-resemble-goods-box" v-if="goodsList.length > 0">
				<view class="padding bg-white text-black text-lg text-title-view">相似商品</view>
				<view class="grid col-2">
					<view class="grid-item-box" v-for="(item, index) in goodsList" :key="index">
						<view class="bg-white item-view" @tap="toGoodsDetail(item.id)">
							<view class="cu-avatar radius lg"
								:style="{ backgroundImage: 'url(' + (item.image || '/static/images/home/goods/1.png') + ')' }" />
							<view class="padding-sm zaiui-text-view">
								<view class="text-cut text-black text-sm">{{ item.title || '商品标题' }}</view>
								<view class="text-sm text-gray text-cut tag-view-box">
									<text v-for="(tag, tagIndex) in item.attributes" :key="tagIndex">{{ tag.value
									}}</text>
								</view>
								<view class="text-price-view">
									<text class="text-price text-lg text-red">{{ item.price.current || 0 }}</text>
								</view>
								<view class="gps-right-view">
									<text class="text-sm text-gray" v-if="item.location">{{ item.location.address ||
										'商品位置' }}</text>
									<text class="text-sm text-gray text-right">{{ item.location.distance || '0km'
									}}</text>

								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!--占位底部距离-->
			<view class="cu-tabbar-height"></view>

			<!--底部操作-->
			<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom">
				<view class="cu-bar">
					<view class="flex flex-wrap">
						
						<view class="basis-xs">
							<view class="text-center" @tap="shareGoods">
								<view class="cuIcon-share" />
								<view class="text-sm">分享</view>
							</view>
						</view>
						<view class="basis-md">
							<view class="btn-view">
								<button class="cu-btn bg-orange radius shadow-blur" @tap="handleChat">聊一聊</button>
							</view>
						</view>
						<view class="basis-md">
							<view class="btn-view">
								<button class="cu-btn bg-red radius shadow-blur" @tap="confirmBuy">马上买</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import barTitle from '@/components/basics/bar-title';

import _goods_data from '@/api/goods.js';	//虚拟数据
import _tool from '@/utils/tools.js';	//工具函数
export default {
	components: {
		barTitle,
	},
	data() {
		return {
			bannerCur: 0, bannerList: [], bottomModal: false, modalTitle: '', modalType: 'promotion', selectType: '',
			goodsList: [], interaction: true, barShow: true, TabCur: 0, tabListData: ['宝贝', '卖家', '互动', '推荐'],
			goodsDetail: null, // 商品详情数据
			loading: true, // 加载状态
			error: false, // 错误状态
			errorMessage: '', // 错误信息
			commonQuestions: [],// 商品问答数据
			questions: [],
			questionsTags: [
				"商品咨询",
				"商品问题",
				"商品建议",
				"商品评价"
			], // 商品问答标签
			questionInput: "",
			userInfo: {
				avatar: '/static/images/home/user/1.png',
				nickName: '用户昵称'
			},
			showBuyDialog: false, // 购买确认对话框显示状态
			sellerStats: [], // 卖家统计数据，在onLoad中初始化
			isFavorited: false, // 用户是否已收藏该商品
			isLiked: false, // 用户是否已点赞该商品
			favoriteCount: 0, // 商品收藏数
			likeCount: 0, // 商品点赞数
			shareCount: 0 // 商品分享数
		}
	},
	async onLoad(options) {
		// 获取商品ID，如果没有则使用默认ID
		const goodsId = options.id || '1001';

		try {
			this.loading = true;
			this.error = false;
			this.errorMessage = '';

			// 获取商品详情数据
			this.goodsDetail = await _goods_data.goodsDetail(goodsId);

			// 获取推荐商品列表
			this.goodsList = await _goods_data.goodsList({ type: 'recommend', goods_id: goodsId });

			// 设置轮播图数据
			this.bannerList = this.goodsDetail.bannerList || [];

			// 获取商品问答数据
			this.commonQuestions = await _goods_data.commonQuestions(goodsId);
			this.questions = await _goods_data.goodsQuestions(goodsId);

			// 检查数据是否有效
			if (!this.goodsDetail) {
				throw new Error('商品详情数据为空');
			}

			// 初始化卖家统计数据
			this.sellerStats = [
				{ value: this.goodsDetail.seller.goodsCount || 0, label: '在售宝贝', iconClass: 'cuIcon-giftfill', highlight: false },
				{ value: this.goodsDetail.seller.transactionCount || 0, label: '累计交易', iconClass: 'cuIcon-cartfill', highlight: false },
				{ value: this.goodsDetail.seller.replyRate || '0%', label: '回复率', iconClass: 'cuIcon-chatfill', highlight: false },
				{ value: this.goodsDetail.comments.goodRate || '0%', label: '好评率', iconClass: 'cuIcon-likefill', highlight: true }
			];
			
			// 初始化收藏、点赞和分享数据
			this.favoriteCount = this.goodsDetail.favorite_count || 0;
			this.likeCount = this.goodsDetail.like_count || 0;
			this.shareCount = this.goodsDetail.share_count || 0;
			// 假设用户初始未收藏未点赞，实际应用中应该从用户数据中获取
			this.isFavorited = false;
			this.isLiked = false;

		} catch (error) {
			console.error('加载商品详情失败:', error);
			this.error = true;
			this.errorMessage = error.message || '加载失败，请重试';

			uni.showToast({
				title: this.errorMessage,
				icon: 'none',
				duration: 2000
			});
		} finally {
			this.loading = false;
		}
	},
	onReady() {
		_tool.setBarColor(true);
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 0
		});
	},
	methods: {
		// 提交商品问答
		submitQuestion() {
			if (!this.questionInput.trim()) {
				uni.showToast({
					title: '请输入问题',
					icon: 'none'
				});
				return;
			}

			// 模拟提交问答
			this.commonQuestions.push({
				question: this.questionInput,
				answer: '这是一个回答',
				tag: this.questionsTags[0]
			});

			// 清空输入框
			this.questionInput = '';
		},
		
		// 切换收藏状态
		toggleFavorite() {
			this.isFavorited = !this.isFavorited;
			this.favoriteCount += this.isFavorited ? 1 : -1;
			
			uni.showToast({
				title: this.isFavorited ? '收藏成功' : '取消收藏',
				icon: 'success',
				duration: 2000
			});
			
			// 这里可以调用API保存收藏状态
			// this.saveFavoriteStatus();
		},
		
		// 切换点赞状态
		toggleLike() {
			this.isLiked = !this.isLiked;
			this.likeCount += this.isLiked ? 1 : -1;
			
			uni.showToast({
				title: this.isLiked ? '点赞成功' : '取消点赞',
				icon: 'success',
				duration: 2000
			});
			
			// 这里可以调用API保存点赞状态
			// this.saveLikeStatus();
		},
		
		// 分享商品
		shareGoods() {
			this.shareCount += 1;
			
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			
			uni.showToast({
				title: '分享功能已开启',
				icon: 'success',
				duration: 2000
			});
		},
		getttImgUrl(url) {
			return _tool.getttImgUrl(url);
		},
		serviceTap() {
			this.modalTitle = "服务";
			this.modalType = 'service';
			this.showModal();
		},
		showModal() {
			this.bottomModal = true;
		},
		hideModal(e) {
			this.bottomModal = false;
			this.modalTitle = "";
			this.modalType = '';
		},
		getSwiperPageItems(pageIndex) {
			// 计算当前页的商品数据
			const startIndex = (pageIndex - 1) * 4;
			const endIndex = startIndex + 4;
			return this.goodsDetail.seller.recommendedGoods.slice(startIndex, endIndex);
		},
		setSwiperItem(indexs, index) {
			let max = (index + 1) * 4;
			let min = max - 4;
			let num = indexs + 1;
			if (num > min && num <= max) {
				return true;
			} else {
				return false;
			}
		},
		tabSelect(e) {
			let index = e.currentTarget.dataset.id;
			this.TabCur = index;
			if (index == 0) {
				uni.pageScrollTo({
					scrollTop: 300,
					duration: 200
				});
			}
			if (index == 1) {
				uni.pageScrollTo({
					scrollTop: 1418,
					duration: 200
				});
			}
			if (index == 2) {
				uni.pageScrollTo({
					scrollTop: 1723,
					duration: 200
				});
			}
			if (index == 3) {
				uni.pageScrollTo({
					scrollTop: 2413,
					duration: 200
				});
			}
		},
		// 处理想要按钮点击
		handleWant() {
			if (!this.goodsDetail) return;

			// 切换想要状态
			this.goodsDetail.wanted = !this.goodsDetail.wanted;

			// 更新想要数量
			if (this.goodsDetail.wanted) {
				this.goodsDetail.wantCount = (this.goodsDetail.wantCount || 0) + 1;
				uni.showToast({
					title: '已添加到想要列表',
					icon: 'success'
				});
			} else {
				this.goodsDetail.wantCount = Math.max(0, (this.goodsDetail.wantCount || 1) - 1);
				uni.showToast({
					title: '已取消想要',
					icon: 'none'
				});
			}
		},
		// 处理聊一聊按钮点击
		handleChat() {
			if (!this.goodsDetail) return;

			uni.showModal({
				title: '提示',
				content: '即将打开聊天界面与卖家沟通',
				success: (res) => {
					if (res.confirm) {
						// 这里可以跳转到聊天页面
						uni.showToast({
							title: '正在打开聊天界面',
							icon: 'loading',
							duration: 2000
						});
					}
				}
			});
		},
		// 确认购买
		confirmBuy() {
			// 跳转到订单页面
			uni.showToast({
				title: '正在跳转到订单页面',
				icon: 'loading',
				duration: 2000
			});
			// 这里可以跳转到订单确认页面
		},
		// 重新加载页面
		reloadPage() {
			this.loading = true;
			this.error = false;
			this.onLoad(this.$mp.query);
		},
		toGoodsDetail(id) {
			uni.navigateTo({
				url: '/pages/goods/detail?id=' + id
			});
		},
	},
	onPageScroll(e) {
		this.scrollY = e.scrollTop;

		// 动态计算Tab切换
		if (this.scrollY < 300) {
			this.TabCur = 0;
			this.barShow = true;
		} else if (this.scrollY >= 300 && this.scrollY < 800) {
			this.TabCur = 0;
			this.barShow = false;
		} else if (this.scrollY >= 800 && this.scrollY < 1200) {
			this.TabCur = 1;
		} else if (this.scrollY >= 1200 && this.scrollY < 1800) {
			this.TabCur = 2;
		} else if (this.scrollY >= 1800) {
			this.TabCur = 3;
		}
	},
}
</script>

<style lang="scss">
/* 全局引入ColorUI样式，确保在所有环境中可用 */
@import "../../static/colorui/main.css";
@import "../../static/colorui/icon.css";
@import "../../static/zaiui/style/app.scss";
@import "../../static/zaiui/style/second_hand.scss";

/* 页面基础样式 */
page {
	background-color: #f8f8f8;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 加载状态和错误状态样式 */
.loading-container,
.error-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 200rpx 0;
	text-align: center;
}

.loading-container .cu-load {
	margin-bottom: 30rpx;
	width: 120rpx;
	height: 120rpx;
}

.error-container .cuIcon-warnfill {
	margin-bottom: 30rpx;
}

/* 商品描述突出显示样式 */
.description-highlight {
	position: relative;
	padding: 20rpx;
	background: linear-gradient(135deg, #f8f9fa, #e9ecef);
	border-radius: 12rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	border-left: 8rpx solid #ff6b6b;
	transition: all 0.3s ease;
}

.description-highlight:active {
	transform: scale(0.98);
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}

/* 价格突出显示样式 */
.price-highlight {
	position: relative;
	display: inline-block;
}

.price-highlight::after {
	content: '';
	position: absolute;
	bottom: -10rpx;
	left: 0;
	right: 0;
	height: 4rpx;
	background: linear-gradient(90deg, #ff6b6b, #ff4757);
	border-radius: 2rpx;
	animation: pricePulse 2s infinite;
}

@keyframes pricePulse {
	0% {
		transform: scaleX(1);
		opacity: 1;
	}

	50% {
		transform: scaleX(0.95);
		opacity: 0.8;
	}

	100% {
		transform: scaleX(1);
		opacity: 1;
	}
}

/* 商品简介区域样式 */
.zaiui-goods-synopsis-view {
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 16rpx;
	overflow: hidden;
	transition: transform 0.3s ease;
}

.zaiui-goods-synopsis-view:active {
	transform: scale(0.98);
}

.user-view {
	display: flex;
	align-items: center;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.user-view .cu-avatar {
	border: 2rpx solid #f0f0f0;
}

.text-name {
	margin-left: 20rpx;
	font-weight: 600;
	color: #333;
}

.text-right-view {
	margin-left: auto;
	display: flex;
	align-items: center;
}

/* 价格优势标签样式 */
.cu-tag.line-orange {
	border-color: #ff9f43;
	color: #ff9f43;
}

.cu-tag.line-blue {
	border-color: #3498db;
	color: #3498db;
}

.cu-tag.line-green {
	border-color: #2ed573;
	color: #2ed573;
}

/* 商品热度信息样式 */
.hot-info {
	margin-top: 20rpx;
	padding: 15rpx 0;
	border-top: 1rpx solid #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.hot-info-item {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.hot-info-value {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.hot-info-label {
	font-size: 24rpx;
	color: #999;
	margin-top: 5rpx;
}

/* 位置信息样式优化 */
.zaiui-map-view {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #f0f0f0;
}

.cut-view {
	flex: 1;
	overflow: hidden;
}

.cuIcon-locationfill {
	font-size: 28rpx;
}

/* 服务区域样式 */
.zaiui-service-view-box {
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 16rpx;
	overflow: hidden;
}

.tag-view-box {
	display: flex;
	flex-wrap: wrap;
}

.tag-view {
	display: flex;
	align-items: center;
	margin-right: 20rpx;
	margin-bottom: 10rpx;
	color: #666;
	font-size: 28rpx;
}

.tag-view .cuIcon-title {
	font-size: 24rpx;
	margin-right: 8rpx;
}

/* 商品详情区域样式 */
.zaiui-details-view-box {
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 16rpx;
	overflow: hidden;
}

.title-view {
	font-weight: 600;
	margin-bottom: 30rpx;
	position: relative;
}

.title-view::after {
	content: '';
	position: absolute;
	bottom: -15rpx;
	left: 0;
	width: 60rpx;
	height: 6rpx;
	background: linear-gradient(90deg, #ff6b6b, #ff4757);
	border-radius: 3rpx;
}

/* 商品属性样式 */
.grid.col-2 {
	margin-bottom: 30rpx;
}

.col-item {
	padding: 15rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
	display: flex;
}

.col-item text:first-child {
	color: #999;
}

.col-item text:last-child {
	color: #333;
	font-weight: 500;
}


/* 商品图片样式 */
.zaiui-img-box {
	margin: 30rpx 0;
}

.zaiui-img-box image {
	width: 100%;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	transition: transform 0.3s ease;
}

.zaiui-img-box image:active {
	transform: scale(0.98);
}

/* 分割线样式 */
.zaiui-border-view {
	height: 20rpx;
	background-color: #f8f8f8;
	margin: 30rpx -30rpx;
}

/* 验机流程样式优化 */
.zaiui-steps-view {
	padding: 30rpx 0;
}

.cu-steps.steps-arrow .cu-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.cu-steps.steps-arrow .cu-item:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 25rpx;
	right: -50%;
	width: 100%;
	height: 4rpx;
	background-color: #3498db;
}

/* 卖家信息样式优化 */
.zaiui-selll-user-view-box {
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 16rpx;
	overflow: hidden;
}

.seller-verification {
	display: flex;
	align-items: center;
	margin-top: 5rpx;
}

/* 认证信息样式 */
.authentication-badge {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
	margin-left: 10rpx;
}

.auth-item {
	display: flex;
	align-items: center;
	padding: 0 16rpx;
	border-radius: 10rpx;
	font-size: 20rpx;
	transition: all 0.2s ease;
}

.auth-item.real-name-auth {
	background-color: #f0f9f0;
	border: 1rpx solid #c8e6c9;
}

.auth-item.phone-auth {
	background-color: #e3f2fd;
	border: 1rpx solid #bbdefb;
}

.auth-item .cuIcon-roundcheckfill,
.auth-item .cuIcon-phonefill {
	font-size: 24rpx;
	margin-right: 6rpx;
}

.auth-text {
	font-weight: 500;
}

.zaiui-grid-tab-view {
	padding: 20rpx;
}

/* 统计数据样式 */
.stats-container {
	display: flex;
	justify-content: space-between;
	background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
	border-radius: 16rpx;
	padding: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.stat-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	transition: transform 0.3s ease;
	padding: 12rpx 0;
}

.stat-item:active {
	transform: scale(0.95);
}

.stat-value {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 12rpx;
}

.stat-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 为统计项之间添加分隔线 */
.stat-item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 2rpx;
	height: 80%;
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1), transparent);
}

/* 推荐商品样式优化 */
.zaiui-goods-swiper-view {
	padding: 20rpx 0;
}

.screen-swiper {
	height: 240rpx;
}

.goods-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10rpx;
}

.goods-item .cu-avatar {
	width: 160rpx;
	height: 160rpx;
	margin-bottom: 10rpx;
	border: 2rpx solid #f0f0f0;
}

.text-price-view {
	font-weight: 600;
	color: #ff4757;
}

/* 互动区域样式优化 */
.zaiui-interaction-view-box {
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 16rpx;
	overflow: hidden;
}

.zaiui-null-view {
	text-align: center;
	padding: 40rpx 0;
}

.text-view-box {
	color: #999;
	margin-bottom: 20rpx;
}

.zaiui-interaction-view {
	padding-bottom: 20rpx;
}

.user-input-view {
	display: flex;
	align-items: center;
	padding: 15rpx;
	background-color: #f8f8f8;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
}

.input-view-box {
	flex: 1;
	position: relative;
	margin-left: 15rpx;
}

.arrow-view {
	position: absolute;
	top: 50%;
	left: -20rpx;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 15rpx solid transparent;
	border-bottom: 15rpx solid transparent;
	border-right: 15rpx solid #fff;
}

.input-view {
	width: 100%;
	padding: 15rpx 80rpx 15rpx 15rpx;
	background-color: #fff;
	border-radius: 25rpx;
	font-size: 28rpx;
}

.input-view-box .cu-btn {
	position: absolute;
	top: 50%;
	right: 10rpx;
	transform: translateY(-50%);
	padding: 0 20rpx;
	height: 50rpx;
	line-height: 50rpx;
	font-size: 24rpx;
}

/* 问答列表样式 */
.zaiui-interaction-list-view {
	margin-bottom: 20rpx;
}

.list-itme {
	display: flex;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.view-box {
	flex: 1;
	margin-left: 15rpx;
}

.title-box {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10rpx;
}

.content-box {
	line-height: 1.6;
	color: #333;
	margin-bottom: 10rpx;
}

.zaiui-comment-view {
	background-color: #f8f8f8;
	margin-top: 10rpx;
}

.user-name-box {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}

.zaiui-reply-view {
	line-height: 1.6;
	color: #333;
}

/* 问答标签样式 */
.zaiui-tag-view-box {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20rpx;
}

.cu-tag.light.bg-red {
	background-color: rgba(255, 71, 87, 0.1);
	color: #ff4757;
	border-color: rgba(255, 71, 87, 0.3);
	margin-right: 15rpx;
	margin-bottom: 15rpx;
}

/* 常见问题样式 */
.zaiui-tag-text-view-box {
	margin-bottom: 20rpx;
}

.cu-tag.line-red {
	border-color: #ff4757;
	color: #ff4757;
	margin-right: 10rpx;
}

/* 相似商品样式 */
.zaiui-resemble-goods-box {
	margin-bottom: 120rpx;
}

.text-title-view {
	font-weight: 600;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.grid-item-box {
	padding: 15rpx;
}

.bg-white.item-view {
	border-radius: 16rpx;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.bg-white.item-view:active {
	transform: scale(0.95);
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.cu-avatar.radius.lg {
	width: 100%;
	height: 300rpx;
}

.zaiui-text-view {
	padding: 15rpx;
}

.text-cut {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.gps-right-view {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10rpx;
}

/* Tab栏样式优化 */
.zaiui-scroll-tab-view {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.nav.z {
	background-color: #fff;
}

.cu-item {
	position: relative;
	padding: 20rpx 0;
}

.cu-item.select {
	color: #333;
	font-weight: 600;
}

.tab-dot {
	position: absolute;
	bottom: 10rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 6rpx;
	border-radius: 3rpx;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.cu-item.select .tab-dot {
	opacity: 1;
}

/* 底部操作栏样式 */
.zaiui-footer-fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.zaiui-foot-padding-bottom {
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.btn-view {
	padding: 0 10rpx;
}

.cu-btn.bg-orange {
	background-color: #ff9f43;
}

.cu-btn.bg-red {
	background-color: #ff4757;
}

.cu-btn.radius.shadow-blur {
	border-radius: 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.cu-btn.radius.shadow-blur:active {
	transform: scale(0.95);
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 购买确认对话框样式 */
.cu-dialog {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	max-width: 600rpx;
	background: white;
	border-radius: 12rpx;
	z-index: 9999;
	box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.15);
	animation: dialogShow 0.3s ease;
}

@keyframes dialogShow {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.9);
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

.cu-dialog__header {
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cu-dialog__title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.cu-dialog__close {
	font-size: 60rpx;
	color: #999;
	transition: color 0.3s ease;
}

.cu-dialog__close:active {
	color: #666;
}

.cu-dialog__body {
	padding: 30rpx;
}

.cu-dialog__footer {
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	border-top: 1rpx solid #f0f0f0;
}

.cu-dialog__footer .cu-btn {
	margin: 0 10rpx;
	flex: 1;
}
</style>
